<template>
  <div :id="id" :class="className" :name="cSize.w" :style="{ width: cWidth + 'px', height: cHeight + 'px',overflow:(scroll?'auto':'hidden') }">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { sysUuid } from "tscommon/ts/ext";
import Vue from 'vue';
const className = "__container-view__";
const Events: {
  [key: string]: ({ key: string; func: () => void })[];
} = {};

const WContainer: {
  [key: string]: { w: number; h: number; isMounted: boolean };
} = {};

export default Vue.extend({
  data() {
    return {
      id: sysUuid(),
      isRoot: false,
      className,
      pid: null as null | string,
      cWidth:0,
      cHeight:0
    };
  },
  created() {
    WContainer[this.id] = { w: 0, h: 0, isMounted: false };
  },
  mounted() {
    //寻找自己的上级
    if (this.width != null && this.height != null) {
      this.isRoot = true;
      this.resize();
    } else {
      //找父节点
      let tmp = this.$el.parentElement,
        pid = null;
      while (tmp != null && tmp.tagName != "BODY") {
        if (tmp.className == className) {
          pid = tmp.id;
          break;
        }
        tmp = tmp.parentElement;
      }
      if (pid == null) {
        this.isRoot = true;
      } else {
        this.pid = pid;
        //侦听事件
        Events[pid] = Events[pid] || [];
        Events[pid].push({
          key: this.id,
          func: () => {
            this.resize();
          }
        });

        //如果父节点已经挂载,则触发大小变更事件
        if(WContainer[pid].isMounted){
          this.resize();
        }
      }
    }
    WContainer[this.id].isMounted=true;
  },
  methods: {
    resize() {
      if(this.width==null&&this.pid==null){
        return;
      }
      let tW=0,tH=0;
      if(this.pid==null){
        tW = this.width;
        tH = this.height;
      }else{
        tW = WContainer[this.pid].w;
        tH = WContainer[this.pid].h;
      }

      if(tW==this.cWidth&&tH==this.cHeight)return;

      this.cWidth = this.width||(tW - this.outWidth);
      this.cHeight = this.height||(tH - this.outHeight);
      WContainer[this.id].w = this.cWidth;
      WContainer[this.id].h = this.cHeight;

      this.$emit('onresize',{w:this.cWidth,h:this.cHeight});

      //大小变更事件
      const events = Events[this.id];
      if (events == null || events.length == 0) return;
      events.forEach(m=>{
        m.func();
      })
    }
  },
  beforeDestroy() {
    delete WContainer[this.id];
    delete Events[this.id];
    if (this.pid&&Events[this.pid]!=null) {
      const idx = Events[this.pid].findIndex(m => m.key == this.id);
      if (idx > -1) {
        Events[this.pid].splice(idx, 1);
      }
    }
  },
  props: {
    width: {
      type: Number
    },
    height: {
      type: Number
    },
    outWidth: {
      type: Number,
      default:0
    },
    outHeight: {
      type: Number,
      default:0
    },
    scroll:{
      type:Boolean,
      default:true
    }
  },
  computed:{
    cSize:function(){
      const r =  {w:this.width,h:this.height,oW:this.outWidth,oH:this.outHeight};
      if(WContainer[this.id].isMounted){
        this.resize();
      }
      return r;
    }
  }
});
</script>
